<script setup lang="ts">
import MarkdownIt from "markdown-it";
import {katex} from '@mdit/plugin-katex'
import {footnote} from "@mdit/plugin-footnote";
import {mark} from "@mdit/plugin-mark";
import {ins} from "@mdit/plugin-ins";
import {sub} from "@mdit/plugin-sub";
import {sup} from "@mdit/plugin-sup";
import highlightjs from "markdown-it-highlightjs";
import 'highlight.js/scss/default.scss'
import 'highlight.js/styles/intellij-light.css'


import 'katex/dist/katex.min.css'

const md = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
}).use(katex).use(footnote).use(mark).use(ins).use(sub).use(sup).use(highlightjs)

const props = defineProps({
  content: {
    type: String,
    required: true,
  }
})

</script>

<template>
  <div v-html="md.render(content)"></div>
</template>

<style lang="css">
.hljs{
  border-radius: 10px !important;
  background-color: #f3f3f3 !important;
}
</style>